<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link
      href="./css/bootstrap.css"
      rel="stylesheet"
    />
    <link href="./css/bootstrap-datepicker.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-lg-8 col-lg-offset-2">
          <h2>登录</h2>
          <hr />
          <form method="post" action="/login">
            <div class="form-group">
              <label for="item">手机号</label>
              <input
                type="text"
                class="form-control"
                id="item"
                name="phone"
                placeholder="请输入您的手机号"
              />
            </div>
            <div class="form-group">
              <label for="item">密码</label>
              <input
                type="password"
                class="form-control"
                id="item"
                name="pass"
                placeholder="6-20 位的非空白字符"
              />
            </div>
            <hr>
            <button type="submit" class="btn btn-primary btn-block">登录</button>
          </form>
        </div>
      </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-datepicker.min.js"></script>
    <script src="./js/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="./js/main.js"></script>
    <script>
      //获取两个密码元素
      let pass = document.querySelector('input[name=pass]');
      let repass = document.querySelector('input[name=repass]');
      let form = document.querySelector('form');
      let phone = document.querySelector('input[name=phone]');

      //表单提交事件  on 当...时候   submit 提交
      form.onsubmit = function(e){
        //检测两次密码是否一致
        if(pass.value !== repass.value){
          alert('两次密码不一致');
          //阻止默认行为
          e.preventDefault();
        }

        //检测手机号是否合法
        let reg = /^1[3-9]\d{9}$/;

        //检测手机号
        if(!reg.test(phone.value)){
          alert('手机号格式不正确');
          e.preventDefault();
        }

        //检测密码长度格式是否正确
        let passReg = /^\S{6,20}$/; // 6-20 位的非空白字符
        if(!passReg.test(pass.value)){
          alert('密码格式不正确');
          e.preventDefault();
        }

      }

    </script>
  </body>
</html>
